import PropTypes from 'prop-types'
import React, { memo, useState, useEffect } from 'react'
import { Modal } from 'antd';

import './style.scss'

const index = memo((props) => {
    const { defaultContent, isShow, setShowStateFn, handleConfirm, title = "标题", showFooter = null, width = 800, centered = false } = props
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

    useEffect(() => {
        setOpen(isShow);
    }, [isShow])

    const handleOk = () => {
        setConfirmLoading(true);
        try {
            handleConfirm && handleConfirm()
            handleCancel()
        } catch (error) {
            console.log(error)
        } finally {
            setConfirmLoading(false);
        }
    };
    const handleCancel = () => {
        setOpen(false);
        setShowStateFn(false)
    };
    return (

        <Modal
            title={title}
            open={open}
            centered={centered}
            destroyOnClose={true}
            onOk={handleOk}
            confirmLoading={confirmLoading}
            onCancel={handleCancel}
            footer={showFooter}
            className='custom-modal'
            width={width}
            styles={{ header: { padding: 0 } }}
        >
            {defaultContent}
        </Modal>

    )
})

index.propTypes = {
    defaultContent: PropTypes.element,
    title: PropTypes.string,
    isShow: PropTypes.bool,
    handleConfirm: PropTypes.func,
    width: PropTypes.number,
    centered: PropTypes.bool,
}

export default index